<template>
	<view class="container">
		<view class="user-info">
			<image src="/static/icon.png"></image>
			<view>Arya Wijaya</view>
			<text>{{ address }}</text>
		</view>
		<view class="amount">${{ amount }}</view>
		<view class="continue-btn" @click="handleSubmit">{{ $t('transferConfirm.continueBtn') }}</view>
	</view>
</template>

<script>
	import transferApi from '@/api/transfer.js'

	export default {
		data() {
			return {
				amount: 0,
				address: ''
			}
		},
		onLoad(options) {
			this.amount = options.amount ? parseFloat(options.amount) : 0
			this.address = options.address || ''
		},
		methods: {
			handleSubmit() {
				// 验证金额
				if (!this.amount || this.amount <= 0) {
					uni.showToast({
						title: this.$t('transferConfirm.error.invalidAmount'),
						icon: 'none'
					})
					return
				}

				// 验证地址
				if (!this.address) {
					uni.showToast({
						title: this.$t('transferConfirm.error.invalidAddress'),
						icon: 'none'
					})
					return
				}

				// 调用转账 API
				transferApi
					.transferByUsername({
						toUsername: this.address,
						tokenType: 'MDF',
						amount: this.amount
					})
					.then(res => {
						uni.showToast({
							title: this.$t('transferConfirm.success'),
							icon: 'success'
						})
						uni.navigateTo({
							url: '/pages/my/transfer-accounts/index'
						})
					})
					.catch(err => {
						uni.showToast({
							title: this.$t('transferConfirm.error.transferFailed'),
							icon: 'none'
						})
						console.error('Transfer failed:', err)
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 100rpx 64rpx 10rpx;
		min-height: 93vh;
		background: #FBFCFF;

		.user-info {
			font-size: 48rpx;
			text-align: center;

			image {
				margin: 0 auto 32rpx;
				width: 232rpx;
				height: 232rpx;
				border-radius: 50%;
			}

			text {
				color: #98A3B4;
				font-size: 28rpx;
			}
		}

		.amount {
			margin: 80rpx auto 270rpx;
			width: 456rpx;
			height: 162rpx;
			line-height: 162rpx;
			text-align: center;
			font-size: 64rpx;
			color: #fff;
			background-color: #52a5f3;
			border-radius: 81rpx;
		}

		.continue-btn {
			margin: 60rpx auto 0;
			width: 622rpx;
			height: 128rpx;
			line-height: 128rpx;
			background-color: #52a5f3;
			font-size: 40rpx;
			color: #fff;
			font-weight: bold;
			text-align: center;
			border-radius: 64rpx;
		}
	}
</style>